<template>
  <div class="container-welcome">
    <img class="logo" :src="require('../../assets/images/logo-default.png')" alt="">
    <div class="title">{{appName}}</div>
    <div class="loading-box">
      <div class="dot-1"></div>
      <div class="dot-2"></div>
      <div class="dot-3"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Welcome",
    data () {
      return {
        appName: '境外游礼包'
      }
    }
  }
</script>

<style lang="scss" scoped>

.container-welcome {
  @media screen and (min-width: 768px) {
    width: 100% !important;
  }
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 50.5px;
  line-height: 2;

  .logo {
    width: 35.5px;
    height: 35.5px;
  }

  .title {
    opacity: 0.9;
    font-family: PingFangSC;
    font-size: 1rem;
    color: #000000;
    letter-spacing: 0;
  }

  .loading-box {
    display: flex;
    justify-content: center;
    padding-top: 14px;

    @keyframes dot-animate {
      100% {background-color: rgba(200, 200, 200, 0.8);}
    }


    .dot-1 {
      border-radius: 50%;
      width: 6px;
      height: 6px;
      background-color: rgba(200, 200, 200, 0.2);
      margin: 0 4px;
      animation: dot-animate 1s infinite;
    }
    .dot-2 {
      border-radius: 50%;
      width: 6px;
      height: 6px;
      background-color: rgba(200, 200, 200, 0.2);
      margin: 0 4px;
      animation: dot-animate 2s infinite 1s;
    }
    .dot-3 {
      border-radius: 50%;
      width: 6px;
      height: 6px;
      background-color: rgba(200, 200, 200, 0.2);
      margin: 0 4px;
      animation: dot-animate 3s infinite 2s;
    }
  }
}

</style>


